/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */
// 1.1 准备查询参数对象
const queryObj = {
  status: '', // 文章状态 string类型 '1'--待审核，'2'--审核通过
  channel_id: '', // 文章频道id
  page: 1, // 当前页码
  per_page: 2, // 每页展示的数据条数
};
let totalPage = 1;

// 1.2 获取文章列表数据,展示到指定的标签结构中
async function setArticlesList() {
  try {
    const res = await axios({
      url: '/v1_0/mp/articles',
      params: queryObj
    });
    console.log(res);
    document.querySelector('.art-list').innerHTML = res.data.results.map(item => `
            <tr>
                <td>
                  <img src=${item.cover.type === 0 ? "https://img2.baidu.com/it/u=2640406343,1419332367&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=708&amp;h=500" : item.cover.images[0]} alt="">
                </td>
                <td>${item.title}</td>
                <td>
                  ${item.status === '1' ? `<span class="badge text-bg-primary">待审核</span>` : `<span class="badge text-bg-success">审核通过</span>`}
                </td>
                <td>
                  <span>${item.pubdate}</span>
                </td>
                <td>
                  <span>${item.read_count}</span>
                </td>
                <td>
                  <span>${item.comment_count}</span>
                </td>
                <td>
                  <span>${item.like_count}</span>
                </td>
                <td data-id = ${item.id}>
                  <i class="bi bi-pencil-square edit"></i>
                  <i class="bi bi-trash3 del"></i>
                </td>
            </tr>
        `).join();
    queryObj.page = res.data.page;
    const totalCount = res.data.total_count;
    totalPage = Math.ceil(totalCount / queryObj.per_page);
    document.querySelector('.page-now').innerText = `第${queryObj.page}/${totalPage}页`;
    document.querySelector('.total-count').innerText = `共${totalCount}篇文章`;
  } catch (error) {
    console.log(error);
  }
}

/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */
// 2.1 设置频道列表数据
async function setChannelsList() {
  const res = await axios({
    url: '/v1_0/channels'
  });
  document.querySelector('.form-select').innerHTML =
    '<option value="" selected disabled>请选择文章频道</option>'
    + res.data.channels.map(item => `<option value=${item.id}>${item.name}</option>`);
}

// 2.2 监听筛选条件改变，保存查询信息到查询参数对象
document.querySelectorAll('.form-check-input').forEach(item => {
  item.addEventListener('change', e => {
    console.log(e.target.value);
    queryObj.status = e.target.value;
  });
})

document.querySelector('.form-select').addEventListener('change', e => {
  queryObj.channel_id = e.target.value
});

document.querySelector('.sel-btn').addEventListener('click', () => {
  setArticlesList();
});

/**
 * 目标3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */
document.querySelector('.last').addEventListener('click', () => {
  if (queryObj.page > 1) {
    queryObj.page--;
    setArticlesList();
  }
});

document.querySelector('.next').addEventListener('click', () => {
  if (queryObj.page < totalPage) {
    queryObj.page++;
    setArticlesList();
  }
});

/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */
document.querySelector('.art-list').addEventListener('click', async e => {
  if (e.target.classList.contains('del')) {
    const delId = e.target.parentNode.dataset.id;
    try {
      const res = await axios({
        url: `/v1_0/mp/articles/${delId}`,
        method: 'DELETE'
      });
      // console.log(res);
      const currentListLength = document.querySelector('.art-list').children.length;
      if (currentListLength === 1 && queryObj.page !== 1) {
        queryObj.page--;
      }
      setArticlesList();
    } catch (error) {
      console.log(error);
    }
  }
});


// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去
document.querySelector('.art-list').addEventListener('click', async e => {
  if (e.target.classList.contains('edit')) {
    const editId = e.target.parentNode.dataset.id;
    location.href = `../publish/index.html?id=${editId}`;
  }
});

// 调用函数获取并渲染文章列表
setArticlesList();
// 调用函数获取并渲染频道列表
setChannelsList();

